<template>
	<!-- 20230331 -->
	<view class="animation-play-vocie-cn">
		<!-- 页面内容 -->
		<view class="page-content">
			<view class="box">
				<view class="wifi-symbol">
					<view class="wifi-circle first"></view>
					<view class="wifi-circle second"></view>
					<view class="wifi-circle third"></view>
				</view>
			</view>
			<view class="send">
				<view class="arrow"></view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-content">

		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		width: 120rpx;
		height: 120rpx;
		box-sizing: border-box;
		position: relative;
		margin: 50rpx auto;
	}

	.wifi-symbol {
		width: 50rpx;
		height: 50rpx;
		box-sizing: border-box;
		position: relative;
		/*必须，否则苹果overflow失效*/
		overflow: hidden;
		transform: rotate(135deg);

	}

	.wifi-circle {
		border: 5rpx solid #333;
		border-radius: 50%;
		position: absolute;
	}

	.first {
		width: 5rpx;
		height: 5rpx;
		background: #fff;
		top: 45rpx;
		left: 45rpx;
	}

	.second {
		width: 25rpx;
		height: 25rpx;
		top: 35rpx;
		left: 35rpx;
		animation: fadeInOut 1s infinite 0.2s;
	}

	.third {
		width: 40rpx;
		height: 40rpx;
		top: 25rpx;
		left: 25rpx;
		animation: fadeInOut 1s infinite 0.4s;
	}

	@keyframes fadeInOut {
		0% {
			opacity: 0;
			/*初始状态 透明度为0*/
		}

		100% {
			opacity: 1;
			/*结尾状态 透明度为1*/
		}
	}
</style>